<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
		<!--label 行内元素-->
		<style type="text/css">
			/*
			 
			 * 
			 * 行内元素
			 * 1. 可以跟其它非块级元素玩在一起
			 * 2. 如果当前行塞不下，就会自动跑到下一行
			 * 3. 不能设置宽高，不能设置垂直方向的外边距和上内边距。
			 * 4. 	内容决定了容器的宽度。
			
			 * 5.容器的大小，是由内容和内边距决定的。(无法直接用width,height,或line-height)
			 * 内容撑起高度 line-height设置无效，也就是说 font-size 比 line-height大 ，line-height则不能设置。
			 * line-height就是等于字体高度。
			 * */
			
			.inline{
				line-height: 100px;
				background-color: skyblue;
				border: 1px solid red;
				font-size: 100px;
				padding-top: 1000px;
			}
			div{
				width: 100px;
				height: 100px;
				background: red;
			}
		</style>
	<body>
		<div><span class="inline">span</span></div>
		
	</body>
</html>
